<template>
	<view class="search-page">
		<view class="search-bar">
			<input class="search-input" type="text" v-model="keyword" placeholder="搜索商品或分类" confirm-type="search" @confirm="doSearch" />
			<button class="search-btn" type="default" @click="doSearch">搜索</button>
		</view>

		<view v-if="products.length === 0 && !loading" class="empty">
			<text class="empty-text">{{ keyword ? '暂无搜索结果' : '请输入关键词搜索' }}</text>
		</view>

		<view v-else class="product-list">
			<view class="product" v-for="p in products" :key="p.id" @click="goDetail(p.id)">
				<image class="cover" :src="getImageUrl(p.coverImage)" mode="aspectFill" />
				<view class="info">
					<text class="title">{{p.title}}</text>
					<text class="price">¥{{p.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data() {
		return {
			keyword: '',
			products: [],
			loading: false
		}
	},
	onLoad(query) {
		if (query && query.keyword) {
			this.keyword = decodeURIComponent(query.keyword);
			this.doSearch();
		}
	},
	methods: {
		async doSearch() {
			if (!this.keyword.trim()) {
				uni.showToast({ icon: 'none', title: '请输入搜索关键词' });
				return;
			}
			this.loading = true;
			try {
				const params = { pageNum: 1, pageSize: 50, keyword: this.keyword.trim() };
				const res = await api.getProducts(params);
				if (res.code === 0) {
					this.products = res.data.records || res.data || [];
					if (this.products.length === 0) {
						uni.showToast({ icon: 'none', title: '暂无搜索结果' });
					}
				} else {
					uni.showToast({ icon: 'none', title: res.message || '搜索失败' });
					this.products = [];
				}
			} catch (err) {
				uni.showToast({ icon: 'none', title: '搜索失败' });
				this.products = [];
			} finally {
				this.loading = false;
			}
		},
		getImageUrl(url) {
			if (!url) return '/static/logo.png';
			if (url.startsWith('http')) return url;
			return BASE_URL + url;
		},
		goDetail(id) {
			uni.navigateTo({ url: `/pages/product/detail?id=${id}` });
		}
	}
}
</script>

<style>
.search-page { padding: 24rpx; background-color: #F0F7FF; min-height: 100vh; }
.search-bar { display: flex; align-items: center; background: #fff; border-radius: 999rpx; padding: 10rpx 20rpx; box-shadow: 0 4rpx 16rpx rgba(91,155,213,.1); margin-bottom: 24rpx; }
.search-input { flex: 1; font-size: 28rpx; padding-right: 20rpx; }
.search-btn { font-size: 28rpx; color: #fff; background: linear-gradient(135deg,#5B9BD5,#7BB3E8); border: none; border-radius: 999rpx; padding: 10rpx 34rpx; }
.empty { display: flex; justify-content: center; align-items: center; padding: 200rpx 0; }
.empty-text { font-size: 28rpx; color: #8FA8C4; }
.product-list { display: flex; flex-wrap: wrap; gap: 20rpx; }
.product { width: calc(50% - 10rpx); background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(91,155,213,.08); }
.cover { width: 100%; height: 320rpx; background: #E8F2FF; }
.info { padding: 20rpx; }
.title { display: block; font-size: 28rpx; color: #2C5F8D; }
.price { display: block; color: #FF4D4F; margin-top: 10rpx; font-weight: 600; }
</style>

